<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * @Date: 2022-04-07 20:18:30
 * @LastEditors: Sam
 * @LastEditTime: 2022-04-29 14:38:18
-->
<template>
    <div class="app-container">
        <el-card>
            <div slot="header" class="clearfix">
                <span>抽奖管理列表</span>
            </div>
             <div class="filter-container">
                <el-input v-model="listQuery.name" placeholder="请输入奖品名称" clearable style="width: 200px;margin-right: 10px;margin-bottom:10px" class="filter-item" @keyup.enter.native="handleFilter" />

                <el-button v-waves  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                {{ '搜索' }}
                </el-button>
                 <el-button v-waves :disabled="!checkPermission(['prize.create'])"  class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                    {{ "添加" }}
                </el-button>     
            </div>
             <el-table
                v-loading="listLoading"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%"
                size="mini"
                >  
                 <!-- <el-table-column align="center" type="selection" width="55"> 
                </el-table-column> --> 
            <el-table-column  align="center" label="奖品ID">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="奖品类型">
                <template slot-scope="scope">
                    <span>{{ scope.row.type_text }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="奖品名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="奖品图片">
                <template slot-scope="scope" v-if="scope.row.image">
                    <el-image   :preview-src-list="scope.row.image ? scope.row.image.split(',') : []" style="width: 50px; height: 50px" :src="scope.row.image" fit="cover"></el-image>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="累计库存">
                <template slot-scope="scope">
                    <span>{{ scope.row.stock }}</span>
                </template>
            </el-table-column>
             <el-table-column  align="center" label="剩余库存">
                <template slot-scope="scope">
                    <span>{{ scope.row.redis_stock }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="每日限制">
                <template slot-scope="scope">
                    <span>{{ scope.row.day_stock_text }}</span>
                </template>
            </el-table-column>
             <el-table-column  align="center" label="累计发出">
                <template slot-scope="scope">
                    <span>{{ scope.row.send_num }}</span>
                </template>  
            </el-table-column>
            <el-table-column  align="center" label="今日发出">
                <template slot-scope="scope">
                    <span>{{ scope.row.today_send_num }}</span>
                </template>  
            </el-table-column>
            <el-table-column  align="center" label="中奖限制">
                <template slot-scope="scope">
                    <span>{{ scope.row.win_times_text }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="中奖概率">
                <template slot-scope="scope">
                    <span>{{ scope.row.ratio_text }}</span>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="状态">
                <template slot-scope="scope">
                      <el-tag   v-if="scope.row.status == '1'" type="success" size="mini">
                    上架
                    </el-tag>
                    <el-tag   v-else type="error" size="mini">
                     下架
                    </el-tag>
                </template>
            </el-table-column>


                <el-table-column align="center" width="250" :label="'操作'">
                <template slot-scope="scope">
                    
                    <el-button v-waves v-permission="['prize.edit']"  type="text"  size='mini' icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">
                        {{ "编辑" }}
                    </el-button>
                    <el-button v-waves v-permission="['prize.add_stock']" v-if="(scope.row.type ==1 || scope.row.type == 3) && scope.row.stock > 0"  type="text"  size='mini' icon="el-icon-plus" @click="handleStock(scope.$index, scope.row)">
                        {{ "添加库存" }}
                    </el-button>
                    <el-button v-waves v-permission="['prize.prize_code_list']" v-if="scope.row.type == 2"  type="text"  size='mini' icon="el-icon-plus" @click="handleCode(scope.$index, scope.row)">
                        {{ "卡券" }}
                    </el-button>
                    <el-button v-waves v-permission="['prize.delete']"  type="text" :destroy-on-close="true" size='mini' icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">
                        {{ "删除" }}
                    </el-button>
                </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </el-card>
          <el-dialog :title="'添加库存'" :visible.sync="stock.dialogVisible" width="20%" v-if="stock.dialogVisible">
             <el-form :model="stock.form" :rules="stock.rules" ref="stockForm" label-width="80px" class="demo-ruleForm">
                <el-form-item label="库存" prop="stock">
                    <el-input-number v-model="stock.form.stock"  :min="1" autocomplete="off"></el-input-number> 
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitStock('stockForm')">确定</el-button>
                    <el-button @click="stock.dialogVisible = false">取消</el-button>
                </el-form-item>
             </el-form>
         </el-dialog>
          <el-dialog :title="'卡券列表'" :visible.sync="code.dialogVisible" @close="getList" :close-on-click-modal=false>
              <el-button v-waves  class="filter-item" type="info" style="margin-bottom:10px" icon="el-icon-download" @click="handleDownload">
                {{ '导入模板下载' }}
              </el-button>
            <el-upload
              class="import"
              :action="question_imports"
              accept=".csv"
              :data="{prize_id:code.codelistQuery.prize_id}"
              :before-upload="beforeImport"
              :headers ="headerObj"
              :on-success="handleImport"
              :show-file-list="false"
              >
              <el-button icon="el-icon-download" type="primary">导入</el-button>
            </el-upload>
              <el-table :data="code.code_table"      v-loading="codelistLoading" border style="width: 100%">
                  <el-table-column  align="center" label="奖品名称">
                      <template slot-scope="scope">
                          <span>{{ scope.row.prize_name }}</span>
                      </template>
                  </el-table-column>
                  <el-table-column  align="center" label="卡券编号">
                      <template slot-scope="scope">
                          <span>{{ scope.row.code }}</span>
                      </template>
                  </el-table-column>
                  <el-table-column  align="center" label="卡券状态">
                      <template slot-scope="scope">
                          <span>{{ scope.row.status_text }}</span>
                      </template>
                  </el-table-column>
                  <el-table-column  align="center" label="发送时间">
                      <template slot-scope="scope">
                          <span>{{ scope.row.send_time }}</span>
                      </template>
                  </el-table-column>
              </el-table>
               <pagination v-show="code.total>0" :total="code.total" :page.sync="code.codelistQuery.page" :limit.sync="code.codelistQuery.limit" @pagination="code_list" />
         </el-dialog>
           <el-dialog :title="'编辑'" :visible.sync="edit.dialogVisible" @close="getList" :close-on-click-modal=false>
            <edit :item="edit" />
         </el-dialog>
        <el-dialog :title="'添加'" :visible.sync="create.dialogVisible" @close="getList"  :close-on-click-modal=false>
            <create :item="create" />
        </el-dialog>
    </div>
</template>
<style scoped>
    .import {
        display: inline-block;
        margin-left: 5px;
    }
</style>
<script>
    import {export_excell} from '@/api/export_excell' // 导出
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { list, detail, del,add_stock,code_list } from '@/api/prize' // api接口
    import Detail from '@/components/Detail/detail' // 详情组件
    import Create from './components/create' // 添加组件
    import Edit from './components/edit' // 编辑组件
    import { parseTime } from '@/utils' // 时间格式化函数
    import { getToken } from '@/utils/auth' // 获取token
    import Pagination from '@/components/Pagination' // 分页组件
    export default{
        name: 'prizeIndex',
        components: { Pagination,Detail,Create,Edit }, // 引入组件
        filters: {
            parseTime // 时间过滤器
        },
        directives: { waves, permission }, // 引入指令
          data() {
            return {
            codelistLoading:false,
            question_imports: process.env.VUE_APP_BASE_API + 'admin/prize_code_import',
             headerObj: {
                'Authorization': 'Bearer ' + getToken()
            },
            list: null, // 列表数据
            total: 0, // 总条数
            select_ids : [], // 选中的id集合
            listLoading: true, //加载loadig
            listQuery: { //列表查询参数
                page: 1,
                limit: 10
            },
            create: { // 新增
                dialogVisible: false
            },
            code: { // 卡券
                dialogVisible: false,
                code_table : [],
                codelistQuery: { //列表查询参数
                    page: 1,
                    limit: 10,
                    prize_id : '',
                },
                total : 0
            },
            stock: { // 添加库存
                dialogVisible: false,
                id:'',
                form : {
                    stock:1
                }
            },
            edit: { // 编辑
                dialogVisible: false,
                id: ''
            }
            }
        },
          created() {
            this.getList()
        },
        methods: {
            beforeImport(){ //导入前回调 
                this.listLoading = true;
            },
            
            handleImport(res) { // 导入
                if(!res.code) {
                    this.$message.error(res.msg)
                    this.listLoading = false;
                } else {
                    this.listLoading = false;
                    this.$message.success(res.msg);
                    this.getList()
                }
            },

            submitStock(formName) { // 添加库存
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        add_stock({
                            id:this.stock.id,
                            stock:this.stock.form.stock
                        }).then(res => {
                            this.$message.success(res.msg)
                            this.stock.dialogVisible = false
                            this.getList()
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleExport(){
                export_excell(process.env.VUE_APP_BASE_API + 'admin/prize_export',this.listQuery);
            },
            checkPermission, // 权限判断函数
            handleFilter() { // 查询
                this.listQuery.page = 1
                this.getList()
            },
            code_list(){ 
                this.codelistLoading = true
                code_list(this.code.codelistQuery).then(res => {
                    this.codelistLoading = false
                    this.code.code_table = res.data.data
                    this.code.total = res.data.total
                })
            },
            
            handleCode(item,row){ // 查看卡券
                this.code.codelistQuery.prize_id = row.id
                this.code.dialogVisible = true
                this.code_list()
            },
            handleCreate() { // 新增对话框显示
              this.create.dialogVisible = true
            },
            handleEdit(index, row) { // 编辑对话框显示
              this.edit.dialogVisible = true
              this.edit.id = row.id
            },
            handleStock(index, row) { // 详情对话框显示
              this.stock.dialogVisible = true
              this.stock.id = row.id
            },
            handleBatch() {  // 批量删除
                var that = this;
                if(this.select_ids.length == 0){
                    this.$message({
                        message: '请选择要删除的数据',
                        type: 'warning'
                    });
                    return false;
                }
                this.$confirm('确认删除选中的数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del(this.select_ids.join(',')).then(res => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getList();
                    }).catch(err => {
                        this.$message({
                            message: err.msg,
                            type: 'error'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleDownload(){
                location.href = ' https://pilihuo.oss-cn-hangzhou.aliyuncs.com/resource/csv_template/%E8%99%9A%E6%8B%9F%E5%8D%A1%E5%88%B8%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.csv';
            },
            handleDelete(index, row) { // 删除
                    const thiz = this
                    this.$confirm('确认要删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        del(row.id).then(() => {
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1500,
                            onClose() {
                                thiz.list.splice(index, 1)
                            }
                        })
                        })
                    }).catch(() => {

                    })
                },
            handleDetail(index, row) { // 详情
                detail(row.id).then((res) => {
                        this.detail.dialogVisible = true
                        const data = res.data
                        this.detail.data = [
                                          {
                    name:"奖品类型",
                    content:data.type,
                    type: "text"
                },
                {
                    name:"奖品名称",
                    content:data.name,
                    type: "text"
                },
                {
                    name:"奖品图片",
                    content:data.image,
                    type: "image"
                },
                {
                    name:"卡券信息",
                    content:data.value,
                    type: "text"
                },
                {
                    name:"库存",
                    content:data.stock,
                    type: "text"
                },
                {
                    name:"每日发放数",
                    content:data.day_stock,
                    type: "text"
                },
                {
                    name:"中奖次数",
                    content:data.win_times,
                    type: "text"
                },
                {
                    name:"中奖概率",
                    content:data.ratio,
                    type: "text"
                },
                {
                    name:"排序",
                    content:data.sort,
                    type: "text"
                },
                {
                    name:"状态",
                    content:data.status,
                    type: "switch"
                },

                        ]
                    })
                    },
            getList() { // 获取列表
                this.listLoading = true
                list(this.listQuery).then(response => {
                        this.list = response.data.data
                        this.total = response.data.total
                        this.listLoading = false
                    })
                },
            }
    }
</script>

